import React, { useCallback } from 'react';
import DocViewer, { DocViewerRenderers } from 'react-doc-viewer';
import { javascript } from '@codemirror/lang-javascript';
import CodeMirror from '@uiw/react-codemirror';
import { MIME_TYPE } from 'configs/contentPage';
import _history from 'history/browser';
import { useLocalStore } from 'hooks';
import { observer } from 'mobx-react-lite';
import ContentStore from 'store/ContentStore';

import { ArrowBackIcon, DownloadIcon, ErrorIcon } from 'components/icons';
import Text, { TEXT_TAG, TEXT_VIEW } from 'components/Text';
import { classnames } from 'utils';

import classes from './ContentsPage.module.scss';

const cnBlobPage = classnames(classes, 'contentsPage');

const ContentsPage: React.FC = () => {
    const { fileContent, isDocFile, docExtension, isSupported } = useLocalStore(() => new ContentStore());

    const goBack = useCallback(() => _history.back(), []);

    return (
        <div className={cnBlobPage()}>
            {history?.state?.usr && (
                <ArrowBackIcon
                    width={40}
                    height={40}
                    color="primary"
                    className={cnBlobPage('button')}
                    onClick={goBack}
                />
            )}
            {isSupported ? (
                isDocFile ? (
                    <DocViewer
                        pluginRenderers={DocViewerRenderers}
                        documents={[
                            {
                                uri: fileContent?.downloadUrl ?? '',
                                fileType: MIME_TYPE[docExtension],
                            },
                        ]}
                        className={cnBlobPage('docViewer')}
                    />
                ) : (
                    <div className={cnBlobPage('codeViewer')}>
                        <div className={cnBlobPage('codeViewer-header')}>
                            <Text className={cnBlobPage('codeViewer-name')}>{fileContent?.name}</Text>
                            <a
                                href={fileContent?.downloadUrl}
                                download
                                target="_blank"
                                className={cnBlobPage('download')}
                            >
                                <DownloadIcon width={16} height={16} />
                            </a>
                        </div>
                        <CodeMirror
                            value={fileContent?.content}
                            editable={false}
                            extensions={[javascript({ typescript: true, jsx: true })]}
                            width="100%"
                            className={cnBlobPage('theme')}
                        />
                    </div>
                )
            ) : (
                <div className={cnBlobPage('error')}>
                    <ErrorIcon width={'30%'} height={'30%'} style={{ maxHeight: '300px', maxWidth: '300px' }} />
                    <Text tag={TEXT_TAG.span} view={TEXT_VIEW.p20} className={cnBlobPage('error-text')}>
                        Currently, viewing files with the extension .<b>{docExtension}</b> is not available, but you can
                        <a href={fileContent?.downloadUrl} download target="_blank" className={cnBlobPage('download')}>
                            {` download `}
                        </a>
                        it.
                    </Text>
                </div>
            )}
            {history?.state?.usr && (
                <ArrowBackIcon
                    width={40}
                    height={40}
                    color="primary"
                    className={cnBlobPage('button')}
                    onClick={goBack}
                />
            )}
        </div>
    );
};

export default observer(ContentsPage);
